/**
* @名称:管理员主页
* @作者:陈博宇
* @创建时间：2021/7/19
* @修改时间：2021/7/22
*/

<template>
	<view class="main">
		<!-- 头部状态栏 -->
		<view class="header">
			<img src="/static/xiangzulogo.png" style="width: 176rpx; height: 99rpx;" fit="cover" class="logo">
			<view class="navitems">
				<view class="navitem">当前身份：管理员</view>
				<el-badge :value="messageNum" class="navitem" hidden="messageNum==0">
					<view @click="jumpToMessage">消息</view>
				</el-badge>
				<view class="navitem" @click="logOut">退出登录</view>
			</view>
		</view>
		<!-- 界面主体 -->
		<el-tabs class="tabs" :tab-position="tabPosition" type="border-card">
			<!-- 待审核商品界面 -->
			<el-tab-pane>
				<span slot="label"><i class="el-icon-edit"></i>待审核商品</span>
				<!-- 待审核商品列表 -->
				<view id="examine">
					<el-table :data="examineGoods" border style="width: 100%; margin-top: 20px" height="625">
						<el-table-column prop="name" label="商品名" width="250" sortable>
						</el-table-column>
						<el-table-column prop="skuImages" label="图片" width="100">
							<template slot-scope="scope">
								<img :src='"http://47.96.168.135:7388"+scope.row.src' style="width:60px;height:60px;" />
							</template>
						</el-table-column>
						<el-table-column prop="storeName" label="店铺名">
						</el-table-column>
						<el-table-column prop="sort" label="类别">
						</el-table-column>
						<el-table-column prop="brand" label="品牌">
						</el-table-column>
						<el-table-column prop="paramete" label="配置">
							<template slot-scope="scope">
								<div>
									<ul>
										<li v-for="item in scope.row.paramete">
											{{ item.value }}
										</li>
									</ul>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="state" label="状态" width="100">
							<template slot-scope="scope">
								<el-tag :type="scope.row.type" effect="dark" disable-transitions>
									{{scope.row.state}}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center">
							<template slot-scope="scope">
								<el-button size="mini" type="primary" @click="jumpToDetail(scope.row.id)">查看
								</el-button>
								<el-button size="mini" type="danger" @click="test()">修改
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</view>
			</el-tab-pane>
			<!-- 所有商品界面 -->
			<el-tab-pane>
				<span slot="label"><i class="el-icon-shopping-bag-1"></i>所有商品</span>
				<!-- 商品列表 -->
				<view id="allGoods">
					<el-table :data="allGoods" border style="width: 100%; margin-top: 20px" height="625">
						<el-table-column prop="name" label="商品名" width="250" sortable>
						</el-table-column>
						<el-table-column prop="skuImages" label="图片" width="100">
							<template slot-scope="scope">
								<img :src='"http://47.96.168.135:7388"+scope.row.src' style="width:60px;height:60px;" />
							</template>
						</el-table-column>
						<el-table-column prop="storeName" label="店铺名">
						</el-table-column>
						<el-table-column prop="sort" label="类别">
						</el-table-column>
						<el-table-column prop="brand" label="品牌">
						</el-table-column>
						<el-table-column prop="paramete" label="配置">
							<template slot-scope="scope">
								<div>
									<ul>
										<li v-for="item in scope.row.paramete">
											{{ item.value }}
										</li>
									</ul>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="state" label="状态" width="100">
							<template slot-scope="scope">
								<el-tag :type="scope.row.type" effect="dark" disable-transitions>
									{{scope.row.state}}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center">
							<template slot-scope="scope">
								<el-button size="mini" type="primary" @click="jumpToDetail(scope.row.id)">查看
								</el-button>
								<el-button size="mini" type="danger" @click="test()">修改
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</view>
			</el-tab-pane>
		</el-tabs>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabPosition: 'left',

				examineGoods: [],

				allGoods: [],

				sku: [],
				examineSku: [],
			}
		},

		mounted: function() {
			this.getAllGoods();
			this.getExamineGoods();
		},

		onLoad() {
			if (!this.$cookies.isKey("admin")) {
				this.$alert('您还未登录，请先登录！', '错误', {
					confirmButtonText: '确定',
				});
				uni.redirectTo({
					url: "AdminloginIndex"
				})
			}
		},

		methods: {
			// 跳转到商品详情
			jumpToDetail(id) {
				uni.navigateTo({
					url: 'ExamineSku?id=' + id
				})
			},
			// 获取所有商品
			async getAllGoods() {
				var that = this;
				await this.$axios({
					methods: 'get',
					url: '/Admin/GetAllSku',
				}).then(res => {
					that.sku = res.data.date
				}).catch(err => {})
				this.sku.forEach((item, index) => {
					let current = {
						name: item.name,
						src: item.skuImages[0].url,
						sort: item.categoryName,
						brand: item.brandName,
						storeName: item.storeName,
						state: item.state,
						paramete: item.skuSpecificationOptions,
						type: '',
						id: item.id,
					}
					switch (current.state) {
						case '未通过':
							current.type = 'danger';
							break;
						case '待审核':
							current.type = 'warning';
							break;
						case '已上架':
							current.type = 'success';
							break;
						case '已下架':
							current.type = 'info';
							break;
					}
					this.allGoods.push(current);
				})
			},
			// 获取待审核商品
			async getExamineGoods() {
				var that = this;
				await this.$axios({
					methods: 'get',
					url: '/Admin/GetAllReviewedSku',
				}).then(res => {
					that.examineSku = res.data.date
				}).catch(err => {})
				this.examineSku.forEach((item, index) => {
					let current = {
						name: item.name,
						src: item.skuImages[0].url,
						sort: item.categoryName,
						brand: item.brandName,
						storeName: item.storeName,
						state: item.state,
						paramete: item.skuSpecificationOptions,
						type: 'warning',
						id: item.id,
					}
					this.examineGoods.push(current);
				})
			},
		}
	}
</script>

<style>
	.main {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		float: left;
	}

	/* 顶栏style */
	.header {
		width: 100%;
		height: 99rpx;
		display: flex;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;
	}

	.logo {
		margin-left: 5%;
	}

	.navitems {
		margin: auto;
		display: flex;
		margin-right: 5%;
	}

	.navitem {
		font-size: 15px;
		margin-left: 50rpx;
	}

	.tabs {
		height: 706px;
	}
</style>
